body {
  font-family: Arial, sans-serif;
  padding: 20px;
}

.table-container {
  max-width: 600px;
  max-height: 300px;
  overflow: auto;
  border: 1px solid #ccc;
}

table {
  border: none;
  width: 100%;
  min-width: 800px; /* to enable horizontal scroll */
  td, th {
    border:none;
    padding: 8px 12px;
    background: white;
    white-space: nowrap;
  }
  th {
    background: #007bff;
    color: white;
  }
  thead,.sticky_top {
    position: sticky;
    top: 0;
    z-index: 3;
  }
  .sticky_bottom {
    position: sticky;
    bottom: 0;
    z-index: 3;
  }

  tbody tr td:first-child,thead tr th:first-child,.sticky_left {
    position: sticky;
    left: 0;
    z-index: 2;
  }

  tbody tr td:last-child,thead tr th:last-child,.sticky_right {
    position: sticky;
    right: 0;
    z-index: 2;
  }

  thead tr td:first-child,thead tr th:last-child,.sticky_corner {
    z-index: 5;
  }
}
